<template>
  <div class="main">
    <div class="top">
      <div class="box1">
        <span>主播id:</span>
        <el-input v-model="input_id" placeholder="请输入主播id" class="input1">
        </el-input>
      </div>
      <div class="box2">
        <span>房间号:</span>
        <el-input v-model="romm_num" placeholder="请输入房间号" class="input2">
        </el-input>
      </div>

      <br />
      <div class="box3">
        <span>主播状态:</span>
        <el-input v-model="state" placeholder="直播状态" class="input3">
        </el-input>
      </div>
      <div class="box4">
        <span>主播分类:</span>
        <el-input v-model="input" placeholder="带货" class="input4"> </el-input>
      </div>

      <el-button plain class="btn1 btn">搜索</el-button>
      <el-button plain class="btn2 btn">重置</el-button>
    </div>
  </div>
  <div class="bottom">
    <el-table
      :row-style="{
        background: '#F5F5F5 ',
      }"
      :data="tableData"
      :highlight-current-row="true"
      :header-cell-style="{
        background: '#8B68FF',
        color: '#fff',
        fontSize: 16 + 'px',
        height: 64 + 'px',
      }"
    >
      <el-table-column type="selection" width="102" />
      <el-table-column prop="roomId" label="房间号" />
      <el-table-column prop="anchorId" label="主播id" />
      <el-table-column prop="name" label="主播名称" />

      <el-table-column label="当前状态">
        <template #default="scope">
          <div v-if="scope.row.state == '直播中'" class="toGreen types">
            {{ scope.row.state }}
          </div>
          <div v-else class="toRed types">
            {{ scope.row.state }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="times" label="时间" />
      <el-table-column prop="peopNum" label="观看人数" />
      <el-table-column prop="anchorType" label="主播分类" />
      <el-table-column prop="operation" label="操作" />
      <el-table-column label="回放">
        <template #default="scope">
          <el-image
            v-if="scope.row.state == '已结束'"
            style="width: 32px; height: 32px"
            :src="imgurl"
            alt=""
            fit="fill"
          ></el-image>
          <el-image
            v-else
            style="width: 32px; height: 32px"
            :src="imgur2"
            alt=""
            fit="fill"
          ></el-image>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import axios from "axios";

import "./index/index";
import { ref, onMounted } from "vue";
import { ElTable } from "element-plus";
import imgurl from "../../../img/直播动态/回放.png";
import imgur2 from "../../../img/直播动态/回放灰.png";
// 底部按钮

const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {};
//底部表单

//顶部输入框
const input_id = ref("");
const romm_num = ref("");
const state = ref("");
const input = ref("");

interface ItemType {
  roomId: string;
  id: number;
  anchorId: string;
  name: string;
  state: string;
  times: string;
  peopNum: number;
  anchorType: string;
  operation: string;
  playback: string;
}

const tableData = ref<ItemType[]>([]);
const total = ref<number>(0);
// const input = ref<string>("");

// 当前第几页
let page = 1;

onMounted(() => {
  getData();
});

const getData = () => {
  axios
    .post("/api/pos/list", {
      pageSize: 8,
      currentPage: page,
      //  search: input.value,
    })
    .then((res) => {
      tableData.value = res.data.result;
      total.value = res.data.count;
    });
};

const pageChange = (page1: number) => {
  page = page1;
  getData();
};
</script>

<style lang="less" scoped>
//底部按钮
.demo-pagination-block {
  float: right;
}
//底部表单
.bottom {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  border-radius: 10px;
  /deep/.el-table {
    width: 96%;
    margin: 16px auto 0;
  }

  margin-top: 16px;
}

/deep/ .el-table__body {
  border-collapse: separate;
  border-spacing: 0px 16px;
}

.main {
  overflow: hidden;
}

/deep/ th .el-checkbox__inner {
  display: none;
}
/deep/.el-checkbox__inner {
  margin-left: 64px;
  height: 16px;
  width: 16px;
  background-color: #9f9f9f;
}
.types {
  width: 64px;
  height: 48px;
  color: #fff;
  border-radius: 4px;
  line-height: 48px;
  text-align: center;
}
.toGreen {
  background-color: #00c901;
}
.toRed {
  background-color: #ff0100;
}
//头部
.top {
  border-radius: 18px;
  overflow: hidden;

  width: 100%;
  min-width: 1268px;
  background-color: rgb(255, 255, 255);
  height: 163px;
  .btn {
    font-weight: bold;
    width: 85px;
    height: 48px;
    border-radius: 10px;
  }
  .btn1 {
    margin-left: 35px;
    font-size: 16px;
  }
  .btn2 {
    margin-left: 18px;
    font-size: 16px;
  }

  .el-input {
    width: 70%;
    height: 48px;
    font-size: 16px;
  }

  span {
    font-size: 16px;
    width: 80px;
    display: inline-block;
    margin: 0 17px 0 17px;
    text-align: center;
    line-height: 48px;
    font-weight: bold;
  }
  .box1,
  .box2 {
    margin-top: 17px;
  }
  .box3,
  .box4 {
    margin-top: 34px;
  }
}
.top > div {
  width: 30%;
  height: 48px;
  display: inline-block;
}
</style>
